<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="categoryName"
        placeholder="请输入分类名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="head-container">
      <el-tree
        :data="categoryOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
      />
    </div>
  </div>
</template>
<script>
import { categoryTreeSelect } from '@/api/basicData/categoryManagement/categoryManagement.js'
export default {
  name: 'CategoryTree',
  props: ['categoryOwner'],
  data() {
    return {
      categoryName: undefined,
      categoryOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  created() {
    this.getCategoryTree()
  },
  methods: {
    getCategoryTree() {
      categoryTreeSelect({
        categoryOwner: this.categoryOwner,
        categoryName: this.categoryName,
      }).then((response) => {
        this.categoryOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      this.$emit('getCategory', data.id)
    },
  },
}
</script>
